<template>
    <div class="goods-list">
        <div class="goods-item" v-for="(item,index) in goodsList" :key="item.id" @click="goGoodInfo(item.id)">
            <img  v-lazy="item.images[0]" :title="item.content" :alt="item.content">
            <div class="info">
                <p class="price">￥{{item.market_price}}</p>
                <p class="cot">{{item.content}}</p>
                <p ><span>成交量<i>{{item.turnover}}</i></span>
                    <span>剩余 <i>{{item.surplus}}</i> 件</span></p>
            </div>
        </div>
        <div class="goods-item">
            <img src="https://gaitaobao1.alicdn.com/tfscom/i4/3045420356/O1CN011EV5SsmMr0j547a_!!0-item_pic.jpg_240x240xz.jpg_.webp">
            <div class="info">
                <p class="price">￥399</p>
                <p class="cot">冬季百褶裙女2018新款秋冬套头宽松粗毛线爱心</p>
                <p class="bottom"><span>成交量<i>1234</i></span>
                    <span>剩余 <i>9</i> 件</span></p>
            </div>
        </div>
        <div class="goods-item">
            <img src="https://gaitaobao1.alicdn.com/tfscom/i4/3045420356/O1CN011EV5SsmMr0j547a_!!0-item_pic.jpg_240x240xz.jpg_.webp">
            <div class="info">
                <p class="price">￥399</p>
                <p class="cot">冬季百褶裙女2018新款秋冬套头宽松粗毛线爱心</p>
                <p><span>成交量<i>1234</i></span>
                    <span>剩余 <i>9</i> 件</span></p>
            </div>

        </div>
    </div>
</template>

<script >
    export default {
        data(){
            return {
                goodsList:[]
            }
        },
        created(){
            this.getGoodsList()
        },
        methods:{
                    // 编程式导航
            goGoodInfo(id){
                this.$router.push({
                    name:'goodsinfo',
                    params:{
                        id:id
                    }
                })
            },
            // 获取本地json数据
            getGoodsList(){
                // 使用本地加载
            // this.$axios.get('http://localhost:3000/data').then(ret=>{
            this.$http.get('http://localhost:3000/data').then(ret=>{
                this.goodsList=ret.body

            })

        }
        }
    }
</script>

<style scoped lang="scss">
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .goods-item{
            width: 49%;
            margin-top: 7px;
            box-shadow: 0 0 10px #ccc;
            &:hover {border: 1px solid #644e13;}
                img{
                            width: 100%;
                        }
                        img[lazy-loading]{
                            width: 174px;
                            height: 174px;
                        }
            .info{ 
                padding: 10px;
                        .price{
                            color: red;
                            font-size: 20px;
                            font-weight: bolder;
                        }
                        .cot{
                            color: #000;
                            height: 63px;
                        }
                            bottom: 0;
                        i{
                            color:#714e1c;
                        }
                    }
        }
    }
</style>